<template>
	<view class="home">
		<view v-for="v in houseMag" :key="v.id">
			<view class="house-msg">
				<view class="house-msg-top">
					<view></view>
					<text>房屋信息</text>
				</view>
				<view class="house-msg-body">
					<view class="content-body-title">
						<text>小区</text>
						<text>房间号</text>
						<text>业主</text>
						<text>房屋状态</text>
					</view>
					<view class="content-body-msg">
						<text>{{v.community}}</text>
						<text>{{v.room}}</text>
						<text>{{v.name}}</text>
						<text style="color: orange;">{{v.houseState}}</text>
					</view>
				</view>
			</view>
			<view class="user-msg">
				<view class="user-msg-top">
					<view></view>
					<text>住户信息</text>
				</view>
				<view class="user-msg-body">
					<view class="content-body-title">
						<text>住户姓名</text>
						<text>住户性别</text>
						<text>证件类型</text>
						<text>证件号码</text>
						<text>与业主关系</text>
						<text>手机号码</text>
						<text>本人身份证照片</text>
					</view>
					<view class="content-body-msg">
						<text>{{v.name}}</text>
						<text>{{v.sex}}</text>
						<text>{{v.certificateType}}</text>
						<text>{{v.identificationNumber}}</text>
						<text>{{v.relationships}}</text>
						<text>{{v.phoneNumber}}</text>
					</view>
				</view>
				<view class="body-photo">
					<img :src="v.certificateFront">
				</view>
				<view class="body-photo">
					<img :src="v.certificateBack">
				</view>
			</view>

		</view>
		<navigator url="../confirmHouseMag/releaseMsg" hover-class="navigator-hover">
			<button class="button" type="primary">
				<text class="button-text">下一步</text>
			</button>
		</navigator>
	</view>
</template>

<script>
	import {
		http
	} from "../../utils/http.js"
	export default {
		data() {
			return {
				name: "",
				communityId: "",
				houseMag: [],

			};
		},
		methods: {
			getData() {
				http({
					url: "/householdManagement/list",
					method: "get",
					params: {
						name: this.name
					}
				}).then((res) => {
					if (res.code == 0) {
						this.houseMag = res.data.list;
					} else {
						console.log("数据接收失败")
					}

				})

			},

		},

		onLoad(option) {
			console.log(option);
			this.name = option.name;
			this.getData();
		},
	}
</script>

<style lang="less">
	.home {
		padding: 40rpx;
		display: flex;
		flex-direction: column;

		.house-msg {
			height: 544rpx;
			border: 1px solid #cbcbcb;
			margin-bottom: 20px;

			.house-msg-top {
				height: 80rpx;
				display: flex;
				align-items: center;
				padding: 10px;

				view {
					width: 14rpx;
					height: 34rpx;
					background-color: #0068e8;
					margin-right: 10px;
					border-radius: 40%;
				}
			}

			.house-msg-body {
				flex: 1;
				display: flex;
				font-size: 28rpx;

				.content-body-title {
					margin-left: 16px;
					width: 132rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					color: #ababab;
					line-height: 106rpx;
					height: 100%;
				}

				.content-body-msg {
					margin-left: 16px;
					display: flex;
					flex-direction: column;
					justify-content: center;
					line-height: 106rpx;
					height: 100%;
				}
			}
		}

		.user-msg {
			flex: 1;
			border: 1px solid #cbcbcb;
			display: flex;
			flex-direction: column;
			margin-bottom: 20px;

			.user-msg-top {
				height: 80rpx;
				display: flex;
				align-items: center;
				padding: 10px;

				view {
					width: 14rpx;
					height: 34rpx;
					background-color: #0068e8;
					margin-right: 10px;
					border-radius: 40%;

				}
			}

			.user-msg-body {
				flex: 1;
				display: flex;
				font-size: 28rpx;

				.content-body-title {
					margin-left: 16px;
					width: 200rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					color: #ababab;
					line-height: 106rpx;
					height: 100%;
				}

				.content-body-msg {
					margin-left: 16px;
					display: flex;
					flex-direction: column;
					justify-content: center;
					line-height: 106rpx;
					height: 100%;
				}
			}

			.body-photo {
				width: 580rpx;
				height: 320rpx;
				background-color: #f3f8ff;
				margin: 0 auto;
				margin-bottom: 20px;

				img {
					width: 580rpx;
					height: 320rpx;
				}
			}
		}

		button {
			background-color: #0068e8;
		}

	}
</style>
